import React, { Component } from 'react'
import { connect } from 'react-redux'
import { projectLabelView as projectDuck } from 'ducks'
import { Table } from 'semantic-ui-react'
import { Scrollbars } from 'react-custom-scrollbars'
import Header from './tagHeader'
import Row from './tagRow'
import EditTag from './editTag'

class TableView extends Component {
  state = { value: 'yes' }

  handleChange = (e, { value }) => this.setState({ value })

  render() {
    const { editItemTags } = this.props
    if (editItemTags === undefined) {
      return null
    }
    const tagValues = editItemTags.values.reduce((pre, next) => {
      pre[next.name] = next.value
      return pre
    }, {})
    const { value } = this.state
    return (
      <div style={{ width: '100%', height: '100%' }}>
        <Scrollbars
          style={{ width: '100%', height: '100%' }}
          autoHide
          autoHideTimeout={1000}
          autoHideDuration={200}
          ref="scrollbars"
        >
          <Table compact basic="very">
            <Header />
            <Table.Body>
              {editItemTags.tags.map((tag, i) => (
                <Row key={tag} tag={tag} value={tagValues} />
              ))}
            </Table.Body>
          </Table>
        </Scrollbars>
        <EditTag />
      </div>
    )
  }
}

const mapStateToProps = state => ({
  editItemTags: projectDuck.selectors.editItemTags(state),
})

export default connect(mapStateToProps)(TableView)
